<script setup>
import { ref, reactive, toRefs } from 'vue';

// 通过ref定义响应式变量
const age = ref(123)
// 修改时修改的是对象的value属性
function changeAge() {
  if (age.value == 123) {
    age.value = 321
  } else {
    age.value = 123
  }
}

// 通过reactive定义响应式对象
const obj = reactive({
  name: "张三",
  age: 18,
  child: {
    name: "张三",
    age: 18
  }
})
// 修改时直接修改对象属性
function changeObj() {
  obj.name = "李四",
    obj.age = 20
}

/* 
  toRefs使得结构后的对象属性具有响应式
  return {...toRefs(obj)};
  或者let {name,child}=toRefs(obj)
  调用时可以直接用{{child.nage}}
*/
</script>
  
<template>
  <!-- 响应式变量age -->
  <div>
    {{age}}
  </div>
  <button @click="changeAge">修改age</button>

  <!-- 响应式对象obj -->
  <div>
    name:{{obj.name}} , age:{{obj.age}}
  </div>
  <button @click="changeObj">修改obj</button>
</template>